<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="6" :xs="24">
        <user-card :user="user" />
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本信息" name="basicinfo">
              <user-info :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="repassword">
              <user-repassword :user="user" />
            </el-tab-pane>
            <el-tab-pane label="个性签名" name="signature">
              <user-sign ref="userSign" :user="user" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UserCard from './components/UserCard'
import UserInfo from './components/UserInfo'
import UserRepassword from './components/UserRepassword'
import UserSign from './components/UserSign'

export default {
  name: 'Profile',
  components: { UserCard, UserInfo, UserRepassword, UserSign },
  data() {
    return {
      activeTab: 'basicinfo',
      redirect: undefined
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    },
    activeTab(value) {
      if (value === 'signature') {
        this.$nextTick(() => {
          this.$refs.userSign.loadForm()
        })
      }
    }
  }
}
</script>
